<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/delivery/resources/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="/delivery/resources/raty/lib/jquery.raty.css">
    <script src="/delivery/resources/jquery.3.3.1.min.js"></script>
    <script src="/delivery/resources/bootstrap/bootstrap.min.js"></script>
    <script src="/delivery/resources/raty/lib/jquery.raty.js"></script>
    <style>
        .highlight{
            background-color: lightskyblue !important;
        }
        .container {
            padding: 0px;
            margin: 0px;
        }
        .row {
            padding: 0px;
            margin: 0px;
        }
        .description p {
            text-indent: 2em;
        }
    </style>
    <script>
        $.fn.raty.defaults.path = '/delivery/resources/raty/lib/images';
        $(function () {
            $(".stars").raty({readOnly: true});
        })

        $(function () {
            <!-- 状态不为空，则设置高亮 -->

        });
        $(function () {
            <#if memberReadState??> /*??是不为空，就进来*/
            $('[data-read-state="${memberReadState.readState}"]').addClass("highlight")
            </#if>

            <#if !loginMember??>
            $('[data-read-state],#btnEvaluation,[data-evaluation-id]').click(function () {
                // alert('请登录后才能操作！');
                $('#exampleModalCenter').modal('show');
            })
            </#if>

            <#if loginMember??>
            $('[data-read-state]').click(function () {
                var readState=$(this).data('read-state'); //1,2

                $.post("/delivery/updateReadState",{
                    "memberId":${loginMember.memberId},
                    "bookId":${book.bookId},
                    "readState":readState,
                },function (data) {
                    if(data.code == "0") {
                        $('[data-read-state]').removeClass("highlight");
                        $('[data-read-state="'+readState+'"]').addClass("highlight");
                    }
                },"json")
            })
            //点写评论
            $('#btnEvaluation').click(function () {
                $('#score').raty({}); //将span转换为星形组件
                $('#dlgEvaluation').modal('show');
            })
            //发表评论的，点击按钮
            $('#btnSubmit').click(function () {
                var score = $('#score').raty("score");
                var content = $('#content').val();

                $.post("/delivery/evaluate",{
                    memberId: ${loginMember.memberId},
                    bookId:${book.bookId},
                    score:score,
                    content:content,
                },function (data) {
                    if(data.code=="0"){
                        window.location.reload(); //刷新当前页面（刷新评论）
                    }
                },"json")
            })

            $('[data-evaluation-id]').click(function () {
                var evaluationId=$(this).data("evaluation-id");

                $.post("/delivery/enjoy",{evaluationId:evaluationId,memberId: ${loginMember.memberId}},function (data) {
                    if(data.code=="0"){
                        $('[data-evaluation-id="'+evaluationId+'"] span').text(data.data.enjoy);
                    }
                },"json")
            })
            </#if>

        })

        /*页面一开始，就执行*/
        $(function () {
            /*如果未登录，就显示请先登录再收藏*/
            <#if !loginMember??>
            $('[data-book-id] span').text("请先登录再收藏");
            $('[data-book-id]').click(function () {
                // alert('请登录后才能操作！');
                $('#exampleModalCenter').modal('show');
            })
            </#if>
            <#if loginMember??>
            $(document).ready(function () {
                var bookId=${book.bookId};
                $.post("/delivery/chashoucang",{bookId:bookId,memberId: ${loginMember.memberId}},function (result) {
                    if(result==1){
                        $('[data-book-id="'+bookId+'"] span').text("点击此处收藏");
                    }else if(result==2){
                        $('[data-book-id="'+bookId+'"] span').text("已收藏");
                    }
                },"json")
            })
            $('[data-book-id]').click(function () {
                var bookId=$(this).data("book-id");
                $.post("/delivery/shoucang",{bookId:bookId,memberId: ${loginMember.memberId}},function (result) {
                    if(result==1){
                        $('[data-book-id="'+bookId+'"] span').text("已收藏");
                    }else if(result==2){
                        $('[data-book-id="'+bookId+'"] span').text("点击此处收藏");
                    }
                },"json")
            })
            </#if>
        })


    </script>
</head>
<body>
<div class="container">
    <!--导航部分-->
    <nav class="navbar navbar-light <#--shadow--> mr-auto" style="background-color:#02B6FD;">
        <ul class="nav">
            <li class="nav-item">
                <a href="/delivery/">
                    <img src="/delivery/resources/images/elemo.png" class="mt-1" style="width: 45px;" alt="">
                    <span class="pl-2" style="font-size: 18px;font-weight: bold;margin-top: 3px;color: white">吃了么 美食外卖</span>
                </a>
            </li>
            <li style="padding-left: 110px;padding-top: 10px;">
                <a href="/delivery/" style="color:white;">
                <span>上一页</span>
                </a>
            </li>
        </ul>
    </nav>
    <#--蓝色边缘模糊图层-->
    <div style="height: 200px; background-color:#02B6FD;background: linear-gradient(180deg,#02B6FD,white)">
        <!--详情部分,一行二列-->
        <div class="container p-2 m-0 shadow" style="background-color:#02B6FD;background: linear-gradient(180deg,#02B6FD,white);border: 1px solid #92B8B1;border-radius: 10px">
            <div class="row"><!-- 1列 -->
                <div class="col-4 mb-2 pl-0 pr-0">
                    <img src="/delivery/${book.cover}" style="width: 110px;height:160px;border-radius: 10px">
                </div><!-- 2列 -->
                <div class="col-8 pt-2 mb-2 pl-0">
                    <h6 class="text-black" style="font-weight: bold;font-size: 20px">${book.bookName}</h6>
                    <div class="p-1 alert alert-warning" style="margin-bottom: 10px" role="alert">${book.subTitle}</div>
                    <p class="mb-1">
                        <span class="text" style="color:white;font-weight: bold">距您：${book.author}</span>
                    </p><!-- 一行二列-->
                    <div class="row pr-2">
                        <div class="col-6  p-1"><!-- 1列 -->
                            <button class="btn btn-light btn-sm w-100" data-read-state="1">
                                <img src="/delivery/resources/images/ic_mark_todo_s.png" style="width: 1rem;" class="mr-1">好想要
                            </button>
                        </div>
                        <div class="col-6 p-1"><!-- 2列 -->
                            <button class="btn btn-light btn-sm w-100" data-read-state="2">
                                <img src="/delivery/resources/images/ic_mark_done_s.png" style="width: 1rem;" class="mr-1">我买过
                            </button>
                        </div>
                    </div>

                    <#--收藏按钮-->
                    <button id="shoucang" class="btn btn-danger btn-sm text-white float-right" data-book-id="${book.bookId}" style="position: absolute;top: 0px;right: 15px;margin-top: -3px;">
                        <img src="/delivery/resources/images/shoucang.png" class="mr-1" style="width: 24px;margin-top: -5px;">
                        <span></span>
                    </button>

                </div>
            </div>
            <!--1行3列-->
            <div class="row" style="background-color: rgba(0,0,0,0.5);border-radius: 10px">
                <!-- 1列 -->
                <div class="col-2"><h2 class="text-white">${book.evaluationScore}</h2></div><!--评分值-->
                <!-- 2列 -->
                <div class="col-5 pt-2">
                    <span class="stars" data-score="${book.evaluationScore}"></span><!-- 五星 -->
                </div>
                <!-- 3列 -->
                <div class="col-5 pt-2"><h5 class="text-white">${book.evaluationQuantity}人已评</h5></div><!-- 评论人数量 -->
            </div>
        </div>
        <!-- 图书描述 -->
        <div class="row p-2 description">
            ${book.description}
        </div>
        <!--下面是短评部分, 短评的标题部分 -->
        <div class="alert alert-primary w-100 mt-2" style="margin-bottom: 10px" role="alert">写下您的评论
            <button id="btnEvaluation" class="btn btn-light btn-sm <#--text-white--> float-right" style="margin-top: -3px;">写短评</button>
        </div>
        <!--所有短评-->
        <div class="reply pl-2 pr-2">
            <!--这个div要进行循环，输出，这只是其中一个 #list evaluationList as evaluation-->
            <#list evaluationList as evaluation>
                <div>
                    <!--短评标题-->
                    <div>
                        <span class="pt-1 small text-black-50 mr-2">${evaluation.createTime?string("MM-dd")}</span>
                        <span class="mr-2 small pt-1">${evaluation.member.nickname}</span>
                        <span class="stars mr-2" data-score="${evaluation.score}"></span><#--评分-->
                        <button id="btnEnjoy" class="btn btn-success btn-sm text-white float-right" data-evaluation-id="${evaluation.evaluationId}" style="margin-top: -3px;margin-right: 10px">
                            <img src="/delivery/resources/images/dianzan.png" class="mr-1" style="width: 24px;height: 24px;margin-top: -5px;">
                            <span>${evaluation.enjoy}</span><!--点赞数量-->
                        </button>
                    </div>
                    <!--短评内容-->
                    <div class="row mt-2 small mb-2" style="padding-left: 10px">
                        ${evaluation.content}
                    </div>
                    <hr style="margin-top: 10px;margin-bottom: 5px">
                </div>
            </#list>

        </div>
    </div>
</div>
<#--这下面是模态窗的标准写法格式-->
<div class="modal fade" tabindex="-1" id="exampleModalCenter" style="width: 80%;margin-left: 40px">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="height: 65px; background-color:#02B6FD;background: linear-gradient(180deg,#9fcdff,white);border:0px">
            <div class="modal-body">
                您还未登录，请先登录！
                <a href="/delivery/login" type="button" class="btn btn-primary">去登录</a>
            </div>
        </div>
    </div>
</div>
<!--$('#dlgEvaluation').modal('show')-->
<div class="modal fade" id="dlgEvaluation" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="height: 200px; background-color:#02B6FD;background: linear-gradient(180deg,#9fcdff,white);border:0px">
            <div class="modal-body">
                <h6>为"${book.bookName}"写评价~</h6>
                <form id="frmEvaluation">
                    <div class="input-group mt-2">
                        <span id="score"></span>星
                    </div>
                    <div class="input-group mt-2">
                        <input type="text" name="content" id="content" class="form-control p-4" placeholder="在此写下您的宝贵评价~">
                    </div>
                </form>
            </div>
            <div class="modal-footer" style="border: 0px">
                <button id="btnSubmit" class="btn btn-primary">提交</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script>

</script>
